<template>
    <div class="list-box">
        <div class="pannel-title pannel-between">
            <div>角色列表</div>
            <a-button class="pannel-btn" size="small" type="primary" shape="round" @click="addRole()">
                <PlusCircleFilled />
                新增角色
            </a-button>
        </div>
        <div class="line"></div>
        <div class="data-table">
            <a-table
                :columns="columns"
                :row-key="(record) => record.id"
                :data-source="dataSource"
                :pagination="pagination"
                :loading="isLoading"
                @change="handleTableChange"
            >
                <template #status="{text}">
                    <span class="span-green" v-if="text === 'Y'">已启用</span>
                    <span class="span-red" v-if="text === 'N'">已禁用</span>
                </template>
                <template #action="{record}">
                    <a @click="editRole(record)" title="编辑" style="margin-right:5px;"><img src="@/assets/images/cz-edit.png"/></a>
                    <a @click="deleteRole(record)" title="删除"><img src="@/assets/images/cz-delete.png"/></a>
                </template>
            </a-table>
            <a-modal v-model:visible="visible" :maskClosable="false" :afterClose="closeModal">
                <h3 class="modal-title">新增角色</h3>
                <div class="modal-form">
                    <a-form ref="form1" :model="formState" :rules="rules" :labelCol="{span:6,offset:0}">
                        <a-form-item label="角色名称" name="name">
                            <a-input
                                v-model:value="formState.name"
                                placeholder="角色名称"
                            />
                        </a-form-item>
                        <a-form-item label="角色描述" name="memo">
                            <a-input
                                v-model:value="formState.memo"
                                placeholder="请输入角色描述"
                            />
                        </a-form-item>
                        <a-form-item label="状态" name="status">
                            <a-select v-model:value="formState.status" style="width: 240px">
                                <a-select-option value="Y">启用</a-select-option>
                                <a-select-option value="N">禁用</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-form>
                </div>
                <template #footer>
                    <div class="modal-btn">
                        <a-button type="default" shape="round" @click="closeModal">取消</a-button>
                        <a-button type="primary" shape="round" @click="confirm()">确定</a-button>
                    </div>
                </template>
            </a-modal>
        </div>
    </div>
</template>
<script>
import { PlusCircleFilled } from "@ant-design/icons-vue";
import { useStore } from "vuex";
import { reactive, ref } from "@vue/reactivity";
import { message, Table, Modal,Button,Form,Input,Select} from "ant-design-vue";
import httpRequest from "@/util/httpRequest";
export default {
    components: {
        PlusCircleFilled,
        ATable: Table,
		AModal:Modal,
		AButton:Button,
		AForm:Form,
		AFormItem:Form.Item,
		ASelect:Select,
		ASelectOption:Select.Option,
		AInput:Input,
    },
    setup() {
        const store = useStore();
        //text：页面头部面包屑的显示文字，isBack：是否显示页面头部返回按钮
        store.dispatch("setBreadcrumb", {
            text: "系统设置 / 角色管理",
            isBack: false,
        });
        const formState = ref({
            name:"",
            memo:"",
            status:"",
        });
        const dataSource = ref([]);
        const columns = reactive([
            {
                title: "角色名称",
                dataIndex: "name",
                key: "name",
            },
            {
                title: "角色描述",
                dataIndex: "memo",
                key: "memo",
            },
            {
                title: "创建日期",
                dataIndex: "create_time",
                key: "create_time",
            },
            {
                title: "状态",
                dataIndex: "status",
                key: "status",
                slots: { customRender: "status" },
            },
            {
                title: "操作",
                key: "action",
                slots: { customRender: "action" },
            },
        ]);
        const pagination = reactive({
            current: 1,
            pageSize: 10,
            total: 0,
        });
        return {
            dataSource,
            columns,
            pagination,
            formState,
            isLoading: ref(false),
            visible: ref(false),
        };
    },
    data() {
        return {
            rules: {
                name: {
                    required: true,
                    message: "不能为空",
                    trigger: "blur",
                },
                status: {
                    required: true,
                    message: "不能为空",
                    trigger: "change",
                },
            },
        };
    },
    mounted() {
        this.getList();
    },
    methods: {
        getList() {
            this.isLoading = true;
            httpRequest
                .post("getManagerRoleList", { page: this.pagination.current ,pageSize:this.pagination.pageSize})
                .then((res) => {
                    this.dataSource = res.data.data;
                    this.pagination.total = res.data.total;
                })
                .finally(() => {
                    this.isLoading = false;
                });
        },
        handleTableChange(page) {
            this.pagination.current = page.current;
            this.getList();
        },
        deleteRole(item) {
            Modal.confirm({
                title: "系统提示",
                content: "确认删除当前角色？",
                okText: "确认",
                cancelText: "取消",
                onOk: () => {
                    return new Promise((res) => {
                        httpRequest
                            .post("deleteManagerRole", { id: item.id })
                            .then(() => {
                                message.success("删除角色成功");
                                this.getList();
                            })
                            .catch(() => {
                                message.warning({ content: "角色删除失败", key: "error" });
                            })
                            .finally(() => {
                                this.isLoading = false;
                                res();
                            });
                    });
                },
            });
        },
        addRole() {
			if(this.$refs.form1&&this.$refs.form1.resetFields){
				this.$refs.form1.resetFields();
			}
			this.formState = {
				name:"",
				memo:"",
				status:"",
			};
            this.visible = true;
        },
		editRole(item){
			sessionStorage.setItem("editRole",JSON.stringify(item));
			this.$router.push({path:'/roleOption',query:{id:item.id}});
		},
        confirm() {
            this.$refs.form1.validate().then(()=>{
                httpRequest.post("createManagerRole", this.formState).then(() => {
                    this.visible = false;
					this.getList();
                    message.success("创建成功");
                });
            })
 
        },
		closeModal(){
			this.visible = false;
		}
    },
};
</script>
<style lang="less" scoped>
.line {
    width: 100%;
    margin: 20px 0;
    border-top: 1px solid #eee;
}
.span-green {
    display: flex;
    align-items: center;
    &:before {
        content: "";
        display: block;
        width: 4px;
        height: 4px;
        border-radius: 2px;
        margin-right: 5px;
        background: #14ce79;
    }
}
.span-red {
    display: flex;
    align-items: center;
    &:before {
        content: "";
        display: block;
        width: 4px;
        height: 4px;
        border-radius: 2px;
        margin-right: 5px;
        background: #fe4e50;
    }
}
</style>
